<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           :obj="obj">
    <template slot="title-left">
      <div class="shiwu-title">
        <div>
          <i class="iconfont iconclipboard-line color-span title-span"></i>
          <span class="title-span">{{obj.name}}</span>
        </div>
      </div>
    </template>
    <template slot="content">
      <el-tabs>
        <el-tab-pane :label="key"
                     v-for="(item,key,index) in xttz"
                     :key="index">
          <template v-if="item.length > 0">
            <div v-for="(subItem,index) in item"
                 :key="index"
                 class="shiwu-warp">
              <span @click="goDetail(subItem)">【{{subItem.objectName}}】{{subItem.objectNo}}</span>
              <span>{{subItem.displayTime?subItem.displayTime.substr(0,10):''}}</span>
            </div>
          </template>
          <div v-else
               class="no-data">
            <img src=""
                 alt="">
            <span>暂无数据</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import { getPlatformComponentsPath } from '../../util/util'
import { getAffairtodo } from './config'

export default {
  components: { dragger },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      getPlatformComponentsPath,
      xttz: []
    }
  },
  methods: {
    goDetail (subItem) {
      if (!subItem.routerUrl) return
      getPlatformComponentsPath(this.$router, subItem.routerUrl.indexOf('?') !== -1 ? subItem.routerUrl + '&prefix=' + subItem.routePrefixFront : subItem.routerUrl + '?prefix=' + subItem.routePrefixFront)
    },
    getData () {
      getAffairtodo().then(res => {
        this.xttz = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.no-data {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  img {
    margin-bottom: 10px;
  }
}
/deep/.el-tabs {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 55px);
    .el-tab-pane {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.shiwu {
  &-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    .title-span {
      font-size: 14px !important;
      &:nth-child(2) {
        font-weight: bold;
        margin-left: 5px;
      }
    }
  }
  &-warp {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #ebebeb;
    & > span:nth-child(1) {
      width: calc(100% - 150px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      color: #808080;
      cursor: pointer;
    }
    & > span:nth-child(2) {
      width: 100px;
      text-align: right;
      color: #999;
    }
  }
}
</style>